<template>
    <div class="hotel-main">
      <div class="h-title">订酒店</div>
      <div class="clearfix date-warp">
            <div class="add-travle">
                <input type="text" placeholder="出行目的地"  autocomplete="off">

            </div>
            <div class="stay-time _j_booking_date_item" >
                <span>入住日期</span>
                <input type="text" placeholder="入住日期" >
                <i></i>
            </div>
            <div class="leave-time _j_booking_date_item" >
                <span>离店日期</span>
                <input type="text" placeholder="离店日期"  >
                <i></i>
            </div>
            <div class="hs-item hs-item-people number-guests-picker" >
                <span>人数未定</span>
                <i class="icon-person"></i>
            </div>
            <div class="btn-search" >
              <i></i>
            </div>
      </div>
      <div class="h-notice clearfix">
            <ul>
                <li>
                    <i class="notice01"></i>
                    <div class="flt1">
                        <h2>住宿攻略</h2>
                        <p>区域攻略到特色主题，应有尽有</p>
                    </div>
                </li>
                <li>
                    <i class="notice02"></i>
                    <div class="flt1">
                        <h2>专享价格</h2>
                        <p>多平台价格对比，天天专享特惠</p>
                    </div>
                </li>
                <li>
                    <i class="notice03"></i>
                    <div class="flt1">
                        <h2>真实点评</h2>
                        <p>超过100万真实用户点评和游记</p>
                    </div>
                </li>
            </ul>
    </div>
    <div class="h-theme" id="_j_features">
            <div class="h-title" style="margin-top: 50px;">主题住宿</div>
            <div class="tab-theme">
                <div class="themeList clearfix _j_tab_trigger" >

                    <a  href="javascript:void(0);" :class="{'on' :currentSort==Id}" @click="getItem(Id)" v-for="(item,Id) in stayList" :key="Id">{{item.title}}</a>

                </div>
                <!-- 浪漫花海 -->
                <div class="_j_tab_content"  >
                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 0"  :key="item.Id" v-show="currentSort==0">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>

                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 1"  :key="item.Id" v-show="currentSort==1">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>

                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 2"  :key="item.Id" v-show="currentSort==2">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>

                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 3"  :key="item.Id" v-show="currentSort==3">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>

                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 4"  :key="item.Id" v-show="currentSort==4">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>

                    <ul class="clearfix"  v-for="item in stayList" v-if="item.Id == 5"  :key="item.Id" v-show="currentSort==5">
                      <li v-for="img in item.image" :key="img.id">
                        <div class="fc-item">
                          <a href="/hotel/10747/" target="_blank"  >
                            <div class="pic">
                              <img width="318" height="240" style="width:318px;height:240px;" :src=img.img class="img-show">
                            </div>
                            <div class="bag-opa"></div>
                            <span class="shadow"></span>
                            <div class="info">
                              <h2>{{img.name}}</h2>
                              <p class="caption">{{img.state}}</p>
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>
                </div>




              </div>
      </div>

      <div class="h-favorablle" id="_j_sales">
            <div class="h-title">特价酒店</div>
            <div class="tab-fav">
              <div class="favList clearfix _j_tab_trigger">
                <a href="javascript:void(0);"  class="on">曼谷</a>
                <a href="javascript:void(0);" class="">台北</a>
                <a href="javascript:void(0);"  class="">东京</a>
                <a href="javascript:void(0);"  class="">香港</a>
                <a href="javascript:void(0);"  class="">首尔</a>
                <a href="javascript:void(0);"  class="">新加坡</a>
              </div>
              <div class="tab-con _j_tab_content">
                <ul class="clearfix" style="display: block;" v-for="item in specList" :key="item.Id" >
                  <li v-for="img in item.img" :key="img.id">
                    <a href="" target="_blank" data-type="hotel" >
                      <div class="pic">
                        <img :src=img.img class="img-show">
                      </div>
                      <div class="bag-opa"></div>
                      <div class="fraction">{{img.score}}</div>
                      <div class="info">
                        <div class="prize"></div>
                        <p>{{img.title}}</p>
                        <p class="eng">{{img.Eng}}</p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
      </div>










  </div>
</template>

<script>
import axios from "axios";
export default {
  name:'Hotel',
  data() {
    return {
      isOn:true,
      stayList:[{
        "Id": 0,
        "title": "浪漫花海",
        "image": [{
                "id": 1,
                "name": "富士山",
                "state": "日本",
                "img": "http://p1-q.mafengwo.net/s10/M00/51/B4/wKgBZ1jLu5WAR-ezABxIarXxVhg42.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "奈良",
                "state": "日本",
                "img": "http://n1-q.mafengwo.net/s10/M00/52/05/wKgBZ1jLvEGACICOABuulIYZhuQ06.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "阿姆斯特丹",
                "state": "荷兰",
                "img": "http://b1-q.mafengwo.net/s7/M00/55/A4/wKgB6lQC95mAQFNMAFO-6RdKryY46.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "布鲁塞尔",
                "state": "比利时",
                "img": "http://n1-q.mafengwo.net/s10/M00/52/05/wKgBZ1jLvEGALatTABFdXHEc3vE85.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "林芝",
                "state": "中国",
                "img": "http://b1-q.mafengwo.net/s10/M00/52/05/wKgBZ1jLvEGAH2IlABhOTwykidA02.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "罗平",
                "state": "中国",
                "img": "http://n1-q.mafengwo.net/s10/M00/52/04/wKgBZ1jLvECARBBhAB4nWrWz_nU23.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    },
    {
        "Id": 1,
        "title": "迪士尼乐园",
        "image": [{
                "id": 1,
                "name": "奥兰多",
                "state": "美国",
                "img": "http://p1-q.mafengwo.net/s9/M00/36/17/wKgBs1dL9MGAW6v3ABiEmHUWRLU33.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "上海",
                "state": "中国",
                "img": "http://b1-q.mafengwo.net/s9/M00/38/64/wKgBs1dL-H6AOmv4AAIvGmxUHPw48.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "香港",
                "state": "中国",
                "img": "http://p1-q.mafengwo.net/s8/M00/CD/2B/wKgBpVVXERSAQvoCAANN8wJBjBQ12.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "洛杉矶",
                "state": "美国",
                "img": "http://p1-q.mafengwo.net/s9/M00/36/17/wKgBs1dL9MGAACrcAAR7pFIa8zM59.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "巴黎",
                "state": "法国",
                "img": "http://b1-q.mafengwo.net/s9/M00/36/17/wKgBs1dL9MGAbEreAFRlTqphNrA97.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "东京",
                "state": "日本",
                "img": "http://p1-q.mafengwo.net/s9/M00/38/65/wKgBs1dL-H6AdJU1AAT5Wd6Lvds54.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    },
    {
        "Id": 2,
        "title": "周末好去处",
        "image": [{
                "id": 1,
                "name": "崇明岛",
                "state": "上海",
                "img": "http://n1-q.mafengwo.net/s10/M00/5E/84/wKgBZ1mC9HeADwEbAAXqV9zWTPs05.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "千岛湖",
                "state": "杭州",
                "img": "http://b1-q.mafengwo.net/s10/M00/5E/82/wKgBZ1mC9HeAACckABzu6IM-5mw17.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "莫干山",
                "state": "湖州",
                "img": "http://n1-q.mafengwo.net/s10/M00/5E/85/wKgBZ1mC9HeAarREABKAJaOA97c61.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "古北水镇",
                "state": "北京",
                "img": "http://p1-q.mafengwo.net/s10/M00/5E/83/wKgBZ1mC9HeAG_qrAAJCv6dFP3M18.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "避暑山庄",
                "state": "承德",
                "img": "http://b1-q.mafengwo.net/s10/M00/5E/85/wKgBZ1mC9HiAbM5qABiNd9-F8oI64.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "北戴河",
                "state": "秦皇岛",
                "img": "http://p1-q.mafengwo.net/s10/M00/5E/81/wKgBZ1mC9HeACZQCADSuIfbXC_Q01.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    },
    {
        "Id": 3,
        "title": "亲子之选",
        "image": [{
                "id": 1,
                "name": "狗骨岛",
                "state": "泰国",
                "img": "http://b1-q.mafengwo.net/s9/M00/35/FB/wKgBs1dL9IuAALwPAAJQtfhUH0w07.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "三亚",
                "state": "中国",
                "img": "http://p1-q.mafengwo.net/s9/M00/85/63/wKgBs1dSnJCAI9xnAAktH6opmzI42.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "大阪",
                "state": "日本",
                "img": "http://p1-q.mafengwo.net/s8/M00/CE/AE/wKgBpVYPfxCAbmAgACVmVsv_nM455.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "苏梅岛",
                "state": "泰国",
                "img": "http://p1-q.mafengwo.net/s9/M00/35/FB/wKgBs1dL9IuAGK6JAANBrENLW2052.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "皇后镇",
                "state": "新西兰",
                "img": "http://p1-q.mafengwo.net/s9/M00/35/FA/wKgBs1dL9IuAFbBNAAn120USquo06.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "大堡礁",
                "state": "澳大利亚",
                "img": "http://b1-q.mafengwo.net/s9/M00/35/FA/wKgBs1dL9IuAV8rXAFrJyv-1p4c46.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    },
    {
        "Id": 4,
        "title": "童话小镇",
        "image": [{
                "id": 1,
                "name": "罗腾堡",
                "state": "德国",
                "img": "http://p1-q.mafengwo.net/s9/M00/35/A7/wKgBs1dL8-yAYZOiAArqT3HkVGo63.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "海德堡",
                "state": "德国",
                "img": "http://p1-q.mafengwo.net/s8/M00/96/DF/wKgBpVUQ4FOAehHbAAjSL1DazdY86.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "哈尔施塔特",
                "state": "奥地利",
                "img": "http://b1-q.mafengwo.net/s9/M00/35/A7/wKgBs1dL8-yAbZrYAF1Dvvu7biQ77.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "五渔村",
                "state": "意大利",
                "img": "http://b1-q.mafengwo.net/s9/M00/35/A6/wKgBs1dL8-yAQIoWAA1hQYXOS0w96.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "羊角村",
                "state": "荷兰",
                "img": "http://n1-q.mafengwo.net/s9/M00/35/A6/wKgBs1dL8-yAbMg0AAPe7eypPSg41.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "因特拉肯",
                "state": "瑞士",
                "img": "http://b1-q.mafengwo.net/s9/M00/35/A6/wKgBs1dL8-yAR-LXAAXexFq2AHI55.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    },
    {
        "Id": 5,
        "title": "吃货根据地",
        "image": [{
                "id": 1,
                "name": "成都",
                "state": "四川",
                "img": "http://n1-q.mafengwo.net/s10/M00/2B/62/wKgBZ1mNaUCAM69qAAMYG3TYJv488.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 2,
                "name": "西安",
                "state": "陕西",
                "img": "http://b1-q.mafengwo.net/s10/M00/2B/64/wKgBZ1mNaUCAVahZAAOpWYuWZKs16.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 3,
                "name": "重庆",
                "state": "重庆",
                "img": "http://p1-q.mafengwo.net/s10/M00/2B/64/wKgBZ1mNaUCALXeoAAGJ79clY3861.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 4,
                "name": "长沙",
                "state": "湖南",
                "img": "http://p1-q.mafengwo.net/s10/M00/2B/65/wKgBZ1mNaUCAJLC3AALBBbjmppg62.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 5,
                "name": "澳门",
                "state": "澳门",
                "img": "http://n1-q.mafengwo.net/s10/M00/2B/63/wKgBZ1mNaUCAdFMZAAEuMSfMesM76.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }, {
                "id": 6,
                "name": "兰州",
                "state": "甘肃",
                "img": "http://n1-q.mafengwo.net/s10/M00/2B/62/wKgBZ1mNaUCAIqjBAAEFUwPDL_A20.jpeg?imageMogr2%2Fthumbnail%2F%21636x480r%2Fgravity%2FCenter%2Fcrop%2F%21636x480%2Fquality%2F90"

            }

        ]
    }

],
      specList: [{
     "Id": "1",
     "city": "曼谷",
     "img": [{
             "id": 1,
             "score": "8.4分",
             "title": "曼谷威客3号酒店（原曼谷胜利纪念碑全季酒店）",
             "img": "http://n1-q.mafengwo.net/s11/M00/97/56/wKgBEFsjNU6ADk6NAAIXJnPqJIM73.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Vic3 Bangkok"
         },
         {
             "id": 2,
             "score": "8.8分",
             "title": "穰南帝景酒店",
             "img": "http://b1-q.mafengwo.net/s11/M00/7D/D8/wKgBEFsY872AdeVPAAIR_MMohbg08.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Royal View Resort - Rang Nam"
         },
         {
             "id": 3,
             "score": "8.4分",
             "title": "璀璨专享服务公寓",
             "img": "http://p1-q.mafengwo.net/s7/M00/3F/78/wKgB6lR0t0iAfpAdAANZ56tPKao53.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Abloom Exclusive Serviced Apartments"
         },
         {
             "id": 4,
             "score": "8.7分",
             "title": "曼谷暹罗安纳塔拉酒店",
             "img": "http://n1-q.mafengwo.net/s10/M00/DE/AC/wKgBZ1mINF6ADiZKAAMQRMi1Wy411.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Anantara Siam Bangkok Hotel"
         },
         {
             "id": 5,
             "score": "8.4分",
             "title": "彩虹云霄酒店",
             "img": "http://b1-q.mafengwo.net/s9/M00/1E/47/wKgBs1hJJ1OANkS8AAevVMGRJoE36.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Vic3 Bangkok"
         },
         {
             "id": 6,
             "score": "7.7分",
             "title": "曼谷廊曼机场阿玛瑞酒店",
             "img": "http://n1-q.mafengwo.net/s6/M00/93/D3/wKgB4lMDU3iAMLEGAAJejjVcGGU69.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Amari Don Muang Airport Bangkok"
         },
         {
             "id": 7,
             "score": "8.7分",
             "title": "曼谷利特酒店",
             "img": "http://n1-q.mafengwo.net/s10/M00/B2/49/wKgBZ1nvaZGAR7RKAAKXZ1MPtvU52.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "LiT BANGKOK Hotel"
         },
         {
             "id": 8,
             "score": "8.0分",
             "title": "暹罗四季酒店",
             "img": "http://n1-q.mafengwo.net/s11/M00/97/56/wKgBEFsjNU6ADk6NAAIXJnPqJIM73.jpeg?imageMogr2%2Fthumbnail%2F%21480x480r%2Fgravity%2FCenter%2Fcrop%2F%21480x480%2Fquality%2F90",
             "Eng": "Seasons Siam Hotel"
         }
     ]
 }],
      currentSort:0,
      Id:0

    }
},
  mounted() {
    this.getData();
  },
  methods:{
    getItem(Id){
      this.currentSort = Id;
    },
    getData() {
    //   axios.get('../../static/Stay.json').then(response => {
    //     this.stayList = response.data;
    //   }, response => {
    //     console.log("get stayList is error");
    //   });
    //   axios.get('../../static/Special.json').then(response => {
    //     this.specList = response.data;
    //   }, response => {
    //     console.log("get specList is error");
    //   });
  },
  stayChangActive(Id){
    this.stayMouseOn = index;
  }
  }
}
</script>






<style>
body, p, div {
    margin: 0;
    padding: 0;
}
.hotel-main {
    position: relative;
    z-index: 5;
    width: 1000px;
    margin: 0 auto;
    padding-top: 60px;
}
.h-title {
    font-size: 24px;
    color: #333;
    line-height: 30px;
}
.date-warp {
    height: 47px;
    margin: 40px 0 70px 0;
    position: relative;
    z-index: 9;
}
.add-travle {
    height: 45px;
    width: 352px;
    position: relative;
    float: left;
    margin-right: 10px;
}
.add-travle input {
    width: 340px;
    height: 45px;
    border: 1px solid #999;
    font-size: 16px;
    color: #666;
    border-radius: 4px;
    padding: 0 0 0 10px;
}
.stay-time, .leave-time {
    position: relative;
    float: left;
    height: 47px;
    margin-right: 10px;

}
.stay-time input, .leave-time input, .stay-time span, .leave-time span {
    display: block;
    width: 170px;
    height: 45px;
    line-height: 45px;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 16px;
    color: #666;
    padding: 0 0 0 15px;
}
.stay-time input, .leave-time input {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    padding: 0;
    border: 0;
    width: 100%;
}
.stay-time i, .leave-time i {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 11px;
    top: 15px;
    background: url(~@/assets/Hotel/header-sprites3.png) 0 -140px no-repeat;

    overflow: hidden;
}
.date-warp .hs-item {
    height: 47px;
    position: relative;
    float: left;
    margin-right: 10px;
}
.date-warp .hs-item>span {
    font-size: 16px;
    color: #666;
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    border: 1px solid #999;
    border-radius: 4px;
    width: 159px;
    cursor: pointer;
}
.date-warp .hs-item-people .icon-person {
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 10px;
    width: 15px;
    height: 16px;
    background: url(~@/assets/Hotel/hotel-detail-icon7.png) no-repeat;
    background-position: -70px -140px!important;
    vertical-align: middle;
    overflow: hidden;
}
element.style {
    opacity: 0;
    margin-top: -16px;
    display: none;
}
.ngp-dropdown.align-right {
    right: 0;
}
.ngp-dropdown {
    position: absolute;
    z-index: 1000;
    margin-top: -1px;
    border: 1px solid #ffa800;
    border-radius: 4px;
    box-shadow: 0 0 4px #ffa800;
    background-color: #fff;
    padding: 0 15px;
    width: 480px;
    cursor: default;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.date-warp .btn-search {
    width: 46px;
    height: 46px;
    line-height: 46px;
    background: #ffa800;
    float: left;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}
.date-warp .btn-search i {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(~@/assets/Hotel/header-sprites3.png?a=1) no-repeat;
    background-position: 0 -165px;
    vertical-align: middle;
}
ul, li, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.h-notice ul li {
    float: left;
    width: 333px;
}
.h-notice ul li i.notice01 {
    width: 35px;
    height: 42px;
    background-position: 0 0;
}
.h-notice ul li i {
    display: block;
    float: left;
    margin-right: 13px;
    background: url(~@/assets/Hotel/hotel-sprites1.png) no-repeat;
}
.flt1 {
    float: left;
}
.h-notice ul li h2 {
    font-size: 18px;
    color: #666;
    line-height: 18px;
    font-weight: normal;
}
.h-notice ul li p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}
.h-notice ul li i.notice02 {
    width: 43px;
    height: 42px;
    background-position: -40px 0;
    margin-left: 40px;
}
.h-notice ul li i.notice03 {
    width: 44px;
    height: 42px;
    background-position: -85px 0;
    margin-left: 80px;
}
.clearfix:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
    overflow: hidden;
}

.h-theme {
      margin-top: 50px;
    padding-bottom: 100px;
}
.h-theme .h-title {
    text-align: center;
    margin: 100px 0 25px 0;
    color: #333;
    font-size: 24px;
        line-height: 30px;

}
.themeList {
    border-bottom: 1px solid #e4e4e4;
}
.themeList a.on {
    color: #ff8a00;
    border-bottom: 3px solid #ff8a00;
    margin-bottom: -2px;
}
.themeList a {
    display: block;
    text-decoration: none;
    float: left;
    width: 166px;
    width: 16.66%;
    color: #666;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
}
.clearfix:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
    overflow: hidden;
}
.tab-theme ul {
    width: 1023px;
}
.tab-theme ul li {
    width: 318px;
    height: 240px;
    float: left;
    margin: 20px 23px 0 0;
    position: relative;
}
.fc-item {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}
.tab-theme ul li .pic {
    width: 318px;
    height: 240px;
    overflow: hidden;
}
._j_tab_content .img-show {
    opacity: 1;
}
.tab-theme ul li .bag-opa {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .2;
    z-index: 2;
}
.fc-item .shadow {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    backface-visibility: hidden;
}
.tab-theme ul li .info {
    text-align: center;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -30px;
}
.tab-theme ul li .info h2 {
    font-size: 30px;
    color: #FFF;
    font-weight: normal;
}
.tab-theme ul li .info p {
    font-size: 18px;
    color: #FFF;
}
.fc-item::after {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    display: block;
    content: '';
    height: 22px;
    width: 100%;
    background: url(~@/assets/Hotel/floating-card-shadow.png?a=1) no-repeat;
    background-size: 100%;
}











.h-favorablle {
    padding-bottom: 100px;
}
.h-favorablle .h-title {
    text-align: center;
    margin: 20px 0 25px 0;
}
.favList {
    border-bottom: 1px solid #e4e4e4;
    width: 1000px;
    margin: 0 auto;
}
.favList a.on {
    color: #ff8a00;
    border-bottom: 3px solid #ff8a00;
    margin-bottom: -2px;
}
.favList a {
    display: block;
    text-decoration: none;
    float: left;
    width: 166px;
    width: 16.66%;
    color: #666;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
}
.tab-fav ul {
    width: 1012px;
    padding-top: 20px;
}
.tab-fav ul li {
    width: 240px;
    height: 240px;
    overflow: hidden;
    float: left;
    margin: 0 13px 13px 0;
    position: relative;
}
._j_tab_content .img-show {
    opacity: 1;
}
.tab-fav ul li img {
    width: 240px;
    height: 240px;
}
.tab-fav ul li .bag-opa {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .2;
    z-index: 2;
}
.tab-fav ul li .fraction {
    width: 55px;
    height: 25px;
    font-size: 18px;
    color: #FFF;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 13px;
    top: 13px;
    text-align: center;
    line-height: 25px;
    border-radius: 4px;
    z-index: 5;
}
.tab-fav ul li .info {
    position: absolute;
    z-index: 3;
    left: 13px;
    bottom: 13px;
    width: 220px;
    margin-top: -30px;
    color: #FFF;
}
.tab-fav .info .prize, .tab-fav .info p {
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}
.tab-fav ul li .info p {
    font-size: 14px;
}
.tab-fav ul li .info p.eng {
    font-size: 12px;
}
</style>
